<template>
    <div id="addFill">
       <div class="jx-content">
           <div class='questionall'>
                <div style='overflow:hidden; padding:10px 0'>
                   <h3 class='fl tilt'>{{list.problemName}}</h3>
                </div>
                <div class='countinfo'>
                   <img src="../../../assets/images/re-zip3.png">
                   <span class='studentname'>{{list.userName}}{{list.roleName}}</span>
                   <span class='timeicon'>
                        <i class="iconfont  icon-wode"></i>
                        <span class='times'>{{list.problemTime}}</span>
                    </span>
                </div>
                <div class='question-count'>
                  <p class='artical' v-html="list.problemContent"></p>
                </div>
           </div>
           <div class='my-reply' v-if="replay!=''">
              <p class='title'>全部回答</p>
              <ul>
                 <li v-for="(item,index) in replay" :key="index">
                     <div class='my-reply-li'>
                          <div class='fl my-img'>
                              <img src="../../../assets/images/re-zip3.png">
                          </div>
                          <div class='fl my-info'>
                               <div class='my-info-top'>
                                    <span class='stuname' v-if="item.roleName=='学生'"> {{item.userName}}{{item.roleName}}</span>
                                    <div class='teachername' style='display:inline-block'  v-if="item.roleName=='教师'">
                                        {{item.userName}}
                                       <i id='triangle-left'></i>
                                       <i class='square'></i>
                                       <b class='teacher'>{{item.roleName}}</b>
                                    </div>
                                    <span class='timeicon'>
                                        <i class="iconfont  icon-wode"></i>
                                        <span class='times'>{{item.answerTime}}</span>
                                    </span>
                               </div>
                               <div class='my-info-bot'>
                                  <p class='my-info-bot-count' v-html="item.answerContent"></p>
                               </div>
                          </div>
                           <div class='fr Forbidden'>
                                <button class="Forbidden-btn" style="width:96px; height:35px;" @click="deleteFn(item.id)">删 除 回 答</button> 
                           </div>
                     </div>
                 </li> 
              </ul>
           </div>
           <div class='you-reply'>
              <p class='title'>我要回答</p>
              <mavonEditor ref="youquestion" class='youquestion'></mavonEditor>
              <div class="btn-group">
                <button  class="button-style question-submit" @click='submit'>提 交</button>
                <!-- <button  class=" question-submit-dark" @click='submit' >提 交</button> -->
             </div>
           </div>
       </div>
    </div>
</template>

<script>
    import mavonEditor from "../../../components/mavonEditor";
    import $ from "jquery";
    export default {
        components: { mavonEditor },
        data () {
            return {
                id:'',
                list:{},
                replay:[]
            }
        },
        created() {
          this.id=this.$route.query.id
          this.init()
        },
        methods: {
            //初始化
            init() {
                let self = this
                self.$http.get('/tes/problemCommunication/myAnswerProblemDetail/'+self.id).then((response) => { 
                    let res = response.data
                    if(res.code == '200') {
                        self.list=res.data
                        self.replay=res.data.listReply
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //回答提交
            submit(){
                let self = this
                let answer=this.$refs.youquestion.renders
                self.$http.post('/tes/problemCommunication/toAnswer',{
                    problemId: self.id,
                    courseId:1,
                    answerContent:answer
                }).then((response) => {
                    let res = response.data
                    if(res.code == '200') {
                        self.$message({
                            message: '添加成功',
                            type: 'success'
                        })
                        self.init()
                       self.$refs.youquestion.value=''
                    }else if(res.code == '401'){
                        self.$router.replace({
                            path:'/login'
                        })
                    }else{
                        self.$message.error(res.message)
                    }
                })
            },
            //删除回答
            deleteFn(id){
                let self = this
                let idlist=[]
                idlist.push(id)
				self.$confirm('是否删除这条回答?', '提示', {
					confirmButtonText: '确定',
					cancelButtonText: '取消',
					type: 'warning'
				}).then(() => {
					self.$http.post('/tes/problemCommunication/batchDeletionAnswer',idlist).then((response) => {
						let res = response.data;
						if(res.code == '200'){
                            self.$message({
                                message: '删除成功',
                                type: 'success'
                            })
							self.init()
						}else if(res.code == '401'){
                            self.$router.replace({
                                path:'/login'
                            })
                        }else{
                            self.$message.error(res.message)
                        }
					},(err) => {
						console.log('err');
					})
				}).catch(() => {

				});
            }

        },
    }
</script>
<style>
   .artical>p, .my-info-bot-count>p{
       line-height: 26px;
   }
</style>
<style scoped lang="scss">
 @import "./../../../styles/layout/color_variables";
 #addFill {
    width: $width;
    margin: 20px auto;
    color: #727272;
    .questionall{
        overflow:hidden;
        padding:10px 0;
        .tilt{
            width: 500px;
            overflow: hidden;
            white-space: nowrap;
            text-overflow:ellipsis;
        }
         .btn-group>span{
            font-size:$fs14;
            color:$table-gray
         }
        .countinfo{
            .timeicon{
                margin:0 8px;
                    .times{
                        color:$table-gray; 
                    } 
            }
            .studentname{
              margin:0 10px;  
              color:$table-gray;         
            }
            img{
              border-radius: 50%;
              width:50px;
              height:50px;
           }
        }
        .question-count{
            padding:20px 0;
            .artical{
                margin-bottom:25px;
            }
        }  
    }
    .my-reply{
        margin-bottom:50px;
        .title{
            border-bottom:1px solid #e8e8e8;
            height:35px;
            line-height:35px;
            color:$table-gray;
        }
        .my-reply-li{
             .Forbidden{
                margin-top: 13px;
                margin-right: 30px;
                .Forbidden-btn{
                    width: 65px;
                    height: 25px;
                    border: 1px solid #2b85ed;
                    border-radius: 20px;
                    color: #2b85ed;
                    cursor: pointer;
                }
                .Forbidden-btn-dark{
                     width: 65px;
                    height: 25px;
                    border: 1px solid #999999;
                    border-radius: 20px;
                    color: #999999;
                    cursor: pointer;

                }
           }
            border-bottom:1px solid #e8e8e8;
            padding:30px 0;
            overflow:hidden;
            .Forbidden-btn{
                width: 65px;
                height: 25px;
                border: 1px solid #2b85ed;
                border-radius: 20px;
                color: #2b85ed;
                cursor: pointer;
            }
            .my-img{
                img{
                    border-radius: 50%;
                    width:50px;
                    height:50px; 
                }
            }
            .my-info{
                margin:0 20px;
               .my-info-top{
                   padding-bottom:20px;
                   .teacher{
                        position: relative;
                        left: -38px;
                        color: #fff;
                        font-size: 14px;
                        font-weight: normal;
                        top: 1px;
                   }
                   .teachername{
                      #triangle-left{
                        width:0px;
                        height:0px;
                        border-top:12px solid transparent;
                        border-bottom:12px solid transparent;
                        border-right:16px solid $blue;
                        display:inline-block;
                        vertical-align: middle
                        } 
                      .square{
                        width: 35px;
                        height: 24px;
                        background: $blue;
                        display: inline-block;
                        margin-left: -5px;
                        margin-bottom: -8px
                      }
                   }
                    .stuname{
                        color:$table-gray; 
                    }
                    .timeicon{
                         margin:0 8px;
                         margin-left: -17px;
                        .times{
                            color:$table-gray; 
                        } 
                   
                    }
               }
               .my-info-bot{
                   .my-info-bot-count{
                      width:800px; 
                      line-height: 25px;
                   }
               }
              
            }
        }   
    }
    .you-reply{
        .title{
            border-bottom:1px solid #e8e8e8;
            height:35px;
            line-height:35px;
            color:$table-gray;
        }
        .youquestion{
            margin-top:10px;
        }
        .btn-group {
            text-align: center;
            margin-top: 40px;
        }
        .question-submit-dark{
             border: 1px solid #999999;
            height: 32px;
            width: auto;
            text-align: center;
            vertical-align: middle;
            line-height: 30px;
            color: #999999;
            cursor: pointer;
            border-radius: 20px;
            padding: 0 16px;
            font-size: 14px;
            display: inline-block;
            -webkit-box-sizing: border-box;
            box-sizing: border-box;
        }
    }
 }
</style>